import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col, Popover,message,Modal } from 'antd';
import { Icon } from "antd";
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('onlineEditStore')
@observer
class Main extends React.Component {
  static defaultProps = {
    prefixCls: 'wea-odoc-onlineEdit-toolsBar'
  }
  constructor(props){
    super(props);
    this.getNumOverlay = this.getNumOverlay.bind(this);
    this.getStyleDatas = this.getStyleDatas.bind(this);
    this.resizeWindow = this.resizeWindow.bind(this);
    this.outerFullResize = this.outerFullResize.bind(this);
    this.outerWindowKeyDown = this.outerWindowKeyDown.bind(this);
    this.cheakOpenRevision = this.cheakOpenRevision.bind(this);
    this.checkShowToolsBar = this.checkShowToolsBar.bind(this);

    window.exportRevision = this.onRevision.bind(this);
    window.exportAllRevision = this.receiveAllRevise;
    window.saveLocalFile = this.exportFile.bind(this);
    window.setStyleActive = this.setStyleActive.bind(this);
    this.window = window;
    this.outerWindow = this.getOuterWindow(window);
    this.outerWindow.onresize = this.checkShowToolsBar;
  }

  componentDidMount(){
    this.resizeWindow();
    window.onresize = this.resizeWindow;

  }

  getNumOverlay = () => {
    const { prefixCls, onlineEditStore: {
      numActiveKey, setMobxState,
    } } = this.props;
    const datas = [
      { key: '0', src: '/odoc/odoc/images/styleOne.png', onClick:()=> {CKIframe.setNumber(1)}},
      { key: '1', src: '/odoc/odoc/images/styleTwo.png', onClick:()=>CKIframe.setNumber(2)},
      { key: '2', src: '/odoc/odoc/images/styleThree.png', onClick:()=> CKIframe.setNumber(3)},
      { key: '3', src: '/odoc/odoc/images/styleFour.png', onClick:()=> CKIframe.setNumber(4)},
    ];//模拟数据
    return (
      <div className={`${prefixCls}-numOverLay`}>
        {
          datas.map(v => (
            <div key={v.key}
              className={`${prefixCls}-numOverLay-con ${numActiveKey === v.key && `${prefixCls}-numOverLay-con-active`}`}
              onClick={() => setMobxState({ numActiveKey: v.key })}
            >
              <img alt="" src={v.src} onClick={v.onClick}/>
            </div>
          ))
        }
      </div>
    );
  }

  getAcceptOverlay = () => {
    const { prefixCls } = this.props;
    const {setMobxState} = this.props.onlineEditStore;
    return (
      <div className={`${prefixCls}-acceptOverLay`}>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
            CKIframe.window.receiveReviseAndMoveToNext();
            setMobxState({ showAccept: false });
          }}
        >接受并移到下一条</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
            CKIframe.window.receiveOneRevise();
            setMobxState({ showAccept: false });
          }}
        >接受此修订</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
            this.receiveAllRevise();
            setMobxState({ showAccept: false });
          }}
        >接受所有修订</div>
      </div>
    );
  }

  getRejectOverlay = () => {
    const { prefixCls } = this.props;
    const {setMobxState} = this.props.onlineEditStore;
    return (
      <div className={`${prefixCls}-acceptOverLay`}>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          CKIframe.window.rejectReviseAndMoveToNext();
          setMobxState({ showReject: false });
        }}>拒绝并移到下一条</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          CKIframe.window.rejectOneRevise();
          setMobxState({ showReject: false });
        }}>拒绝此修订</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          CKIframe.window.rejectAllRevise();
          setMobxState({ showReject: false });
        }}>拒绝所有修订</div>
      </div>
    );
  }

  getDeleteOverlay = () => {
    const { prefixCls } = this.props;
    const {setMobxState} = this.props.onlineEditStore;
    return (
      <div className={`${prefixCls}-acceptOverLay`}>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={() => {
          CKIframe.window.deletePostil();
          setMobxState({ showDelete: false });
        }}>删除批注</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={() => {
          CKIframe.window.deleteAllPostil();
          setMobxState({ showDelete: false });
        }}>删除所有批注</div>
      </div>
    );
  }

  getStyleDatas = () => {   
    return [
      {key: '1', class:'odoc_zhubiaoti', title: '标题', style:{fontWeight:"bold",fontSize:"14px"}, onClick:()=>CKIframe.window.execdocTitle()},
      {key: '2', class:'odoc_fubiaoti', title: '副标题', onClick:()=>CKIframe.window.execfubiaoti() },
      {key: '3', class:'odoc_wenhao', title: '文号', onClick:()=>CKIframe.window.execodocNumber() },
      {key: '4', class:'odoc_zhusong', title: '主送机关',onClick:()=>CKIframe.window.execzhusong() },
      {key: '5', class:'odoc_zhengwen', title: '正文', onClick:()=>CKIframe.window.execzhengwen()},     
      {key: '6', class:'odoc_fujian1', title: '附件：', onClick:()=>CKIframe.window.insertAttachment(11) },
      {key: '7', class:'odoc_fujian2', title: '附件:1.', onClick:()=>CKIframe.window.insertAttachment(12) },      
      {key: '8', class:'odoc_shuming', title: '发文机关' , onClick:()=>CKIframe.window.execshuming()},
      {key: '9', class:'odoc_qianshuriqi', title: '成文日期',  onClick:()=>CKIframe.window.execqianshuriqi() },
      {key: '10', class:'odoc_fuzhu', title: '附注', onClick:()=>CKIframe.window.execfuzhu() },
    ]
  }

  getFile = () => {
    const { prefixCls } = this.props;
    const {setMobxState} = this.props.onlineEditStore;
    return (
      <div className={`${prefixCls}-acceptOverLay`}>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          this.uploadFile();
          setMobxState({ showFileList: false });
          // 清楚之前的修订hover时候的痕迹
          CKIframe.window.clearAvtiveRevisionParams();
        }}>打开本地文件</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          this.exportFile();
          setMobxState({ showFileList: false });
        }}>保存到本地</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          this.preview();
          setMobxState({ showFileList: false });
        }}>预览</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          this.previewWithTempl();
          setMobxState({ showFileList: false });
        }}>套红预览</div>
        <div className={`${prefixCls}-acceptOverLay-single`} onClick={()=>{
          this.print();
          setMobxState({ showFileList: false });
        }}>打印</div>
      </div>
    );
  }

  render() {
    const {
      prefixCls,
      onlineEditStore: {
      setMobxState, tipShow, showNum, showStyle, styleActiveKey, showRevision,toolsAllPage,styleNextPage,toolsNowPage,
        showReject, showAccept, displayRevision, newAnnotation, showDelete, displayAnnotations, showToolBar,showFileList,
        fullScreen,
      },
    } = this.props;
    const style = this.getStyleDatas();

    let editFlag = this.getCanRevision();
    const toolsBarMagin = `-${(parseInt(toolsNowPage) - 1) * 100}px`;

    const canClickNextPage = toolsAllPage > toolsNowPage ? true :false;
    const canClickPreviousPage = toolsNowPage > 1 ? true :false;

    let nextPageClick = new Function();
    if(canClickNextPage){
      nextPageClick = ()=>{
        if(!editFlag) return ;
        setMobxState({ toolsNowPage: toolsNowPage + 1 })
      }
    }

    let previousPageClick = new Function();
    if(canClickPreviousPage){
      previousPageClick = ()=>{
        if(!editFlag) return ;
        setMobxState({ toolsNowPage: toolsNowPage - 1 })
      }
    }

    return (
      <div className={`${prefixCls} ${!showToolBar && `${prefixCls}-hideToolBar` }`} unselectable="on" id="toolsBar">
        <div style={{marginTop:toolsBarMagin}}>
          <div className={`${prefixCls}-single`}>
            <div className={`${prefixCls}-single-tools`} onClick={() => {
                if(!editFlag) return;
                setMobxState({ showFileList: !showFileList })
              }}>
              <Popover
                placement="bottomLeft"
                trigger={"hover"}
                visible={showFileList}
                arrowPointAtCenter = {true}
                overlayClassName={`${prefixCls}-popver`}
                overlayStyle={{
                  width: 150,
                }}
                overlay={this.getFile()}>
                <div className={`${prefixCls}-single-tool ${showFileList && `${prefixCls}-single-tool-active`}`}>
                  <span className={`${prefixCls}-single-tool-icon icon-coms-Upload`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <div>文件<span className="icon-coms-organization-down" /></div>
                </div>
              </Popover>
            </div>

          <div className={`${prefixCls}-single-tools`} onClick={() => {
            if(!editFlag) return;
            setMobxState({ showNum: !showNum });
          }}>
            <Popover
              placement="bottomLeft"
              trigger={"hover"}
              visible={showNum}
              arrowPointAtCenter = {true}
              overlayClassName={`${prefixCls}-popver`}
              overlayStyle={{
                width: 105,
              }}
              overlay={this.getNumOverlay()}>
              <div className={`${prefixCls}-single-tool ${showNum && `${prefixCls}-single-tool-active`}`}>
                <span className={`${prefixCls}-single-tool-icon icon-coms-Serial-number`}>
                  <span className="path1" />
                  <span className="path2" />
                  <span className="path3" />
                  <span className="path4" />
                  <span className="path5" />
                  <span className="path6" />
                </span>
                <div>序号<span className="icon-coms-organization-down" /></div>
              </div>
            </Popover>
          </div>
          <div className={`${prefixCls}-single-title`}>插入</div>
        </div>
        <div className={`${prefixCls}-single`} style={{ width: 456,position:"fixed"}}>
          <div className={`${prefixCls}-single-tools`}>
            <div className={`${prefixCls}-style ${showStyle && `${prefixCls}-style-active`}`} 
              onMouseEnter={() => setMobxState({ showStyle: true })} 
              onMouseLeave = {() => setMobxState({ showStyle: false })}
            >
                <div style = {{marginTop: `${styleNextPage && !showStyle  ? "-57px" : "0px"}`}}>
                  {
                    style && style.map(v => (
                      <div
                        key={v.key}
                        style={v.style}
                        className={`odoc_style ${v.class} ${prefixCls}-style-single ${styleActiveKey === v.key && `${prefixCls}-style-single-active`}`}
                        onClick={(e) => {
                          if(!editFlag) return ;
                          setMobxState({ styleActiveKey: v.key });
                          e.stopPropagation && e.stopPropagation();
                          e.preventDefault && e.preventDefault();
                          e.nativeEvent && e.nativeEvent.preventDefault();
                        
                        }}>
                        <div onClick={()=>{if(!editFlag) return ;this.styleOnClick(v.key)}} >{v.title}</div></div>
                    ))
                  }
                </div>
                <span className={`${prefixCls}-style-icon icon-coms-organization-down`} />
              </div>
            </div>
            <div className={`${prefixCls}-single-title`}>样式</div>
          </div>
          <div className={`${prefixCls}-single`} style={{ width: 456,border:'none'}}></div>
          <div className={`${prefixCls}-single`}>
            <div className={`${prefixCls}-single-tools`}  onClick={() => this.onRevision()} >
              <div className={`${prefixCls}-single-tool ${showRevision && `${prefixCls}-single-tool-active`}`} >
                <span className={`${prefixCls}-single-tool-icon icon-coms-Revision`}>
                  <span className="path1" />
                  <span className="path2" />
                </span>
                <div>修订</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-tools`} onClick={() => {
              if(!editFlag) return;
              if(!this.cheakOpenRevision()) return;
              if( this.noRevision() ) return ;
              setMobxState({ showAccept: !showAccept });
              CKIframe.window.clickReceiveRevise();
            }}>
              <Popover
                placement="bottomLeft"
                trigger={"hover"}
                visible={showAccept}
                arrowPointAtCenter = {true}
                overlayClassName={`${prefixCls}-popver`}
                overlayStyle={{
                  width: 150,
                }}
                overlay={this.getAcceptOverlay()}>
                <div className={`${prefixCls}-single-tool ${showAccept && `${prefixCls}-single-tool-active`}`} >
                  <span className={`${prefixCls}-single-tool-icon icon-coms-Accepted`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <div>接受<span className="icon-coms-organization-down" /></div>
                </div>
              </Popover>
            </div>
            <div className={`${prefixCls}-single-tools`} onClick={() => {
              if(!editFlag) return;
              if(!this.cheakOpenRevision()) return;
              if( this.noRevision() ) return ;
              setMobxState({ showReject: !showReject });
              CKIframe.window.clickRejectRevise();
            }}>
              <Popover
                placement="bottomLeft"
                trigger={"hover"}
                visible={showReject}
                arrowPointAtCenter = {true}
                overlayClassName={`${prefixCls}-popver`}
                overlayStyle={{
                  width: 150,
                }}
                overlay={this.getRejectOverlay()}>
                <div className={`${prefixCls}-single-tool ${showReject && `${prefixCls}-single-tool-active`}`} >
                  <span className={`${prefixCls}-single-tool-icon icon-coms-Refuse`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <div>拒绝<span className="icon-coms-organization-down" /></div>
                </div>
              </Popover>
            </div>
            <div className={`${prefixCls}-single-tools`} style={{ display: 'none' }} onClick={() => {
              setMobxState({ displayRevision: !displayRevision });
              CKIframe.window.showReviseList(displayRevision);
            }}>
              <div className={`${prefixCls}-single-tool ${displayRevision && `${prefixCls}-single-tool-active`}`}  >
                <span className={`${prefixCls}-single-tool-icon icon-coms-Display-revision`}>
                  <span className="path1" />
                  <span className="path2" />
                </span>
                <div>显示修订</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-tools`}>
              <div className={`${prefixCls}-single-tool`}>
                <div style={{ paddingBottom: 5 }} className={`${prefixCls}-single-click`} onClick={()=>{
                  if(!editFlag) return;
                  if(!this.cheakOpenRevision()) return;
                  if( this.noRevision() ) return ;
                  CKIframe.window.findPrevious()
                }}>
                  <span className={`${prefixCls}-single-tool-icon2 icon-coms-Last-place `}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <span>上一条</span>
                </div>
                <div onClick={()=>{
                  if(!editFlag) return;
                  if(!this.cheakOpenRevision()) return;
                  if( this.noRevision() ) return ;
                  CKIframe.window.findNext()
                }} className={`${prefixCls}-single-click`}>
                  <span className={`${prefixCls}-single-tool-icon3 icon-coms-Next1`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <span>下一条</span>
                </div>
              </div>
            </div>
            <div className={`${prefixCls}-single-title`}>修订</div>
          </div>
          <div className={`${prefixCls}-single`}>
            <div className={`${prefixCls}-single-tools`} 
              // onClick={() => {
              //   setMobxState({ newAnnotation: !newAnnotation });
              // }}
            >
              <div className={`${prefixCls}-single-tool ${prefixCls}-single-click ${newAnnotation && `${prefixCls}-single-tool-active`}`} onClick={()=>{if(!editFlag) return ;CKIframe.window.creatPostil()}}>
                <span className={`${prefixCls}-single-tool-icon icon-coms-New-annotation`}>
                  <span className="path1" />
                  <span className="path2" />
                </span>
                <div>新建批注</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-tools`} onClick={() => {
                if(!editFlag) return ;
                setMobxState({ showDelete: !showDelete });
              }}
            >
              <Popover
                placement="bottomLeft"
                trigger={"hover"}
                arrowPointAtCenter = {true}
                visible={showDelete}
                overlayClassName={`${prefixCls}-popver`}
                overlayStyle={{
                  width: 150,
                }}
                overlay={this.getDeleteOverlay()}>
                <div className={`${prefixCls}-single-tool ${showDelete && `${prefixCls}-single-tool-active`}`}>
                  <span className={`${prefixCls}-single-tool-icon icon-coms-Delete`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <div>删除<span className="icon-coms-organization-down" /></div>
                </div>
              </Popover>
            </div>
            <div className={`${prefixCls}-single-tools`} onClick={() => {
              if(!editFlag) return ;
              setMobxState({ displayAnnotations: !displayAnnotations });
            }}>
              <div className={`${prefixCls}-single-tool ${displayAnnotations && `${prefixCls}-single-tool-active`}`} onClick ={()=>{if(!editFlag) return ;CKIframe.window.showPostilList(displayAnnotations)}}>
                <span className={`${prefixCls}-single-tool-icon icon-coms-Display-annotations`}>
                  <span className="path1" />
                  <span className="path2" />
                </span>
                <div>显示批注</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-tools`}>
              <div className={`${prefixCls}-single-tool`}>
                <div 
                  style={{ paddingBottom: 5 }} 
                  className={`${prefixCls}-single-click`} 
                  onClick={()=>{
                    if(!editFlag) return ;
                    CKIframe.window.findPreviousItem();
                  }}>
                  <span className={`${prefixCls}-single-tool-icon2 icon-coms-the-last-one`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <span>上一条</span>
                </div>
                <div className={`${prefixCls}-single-click`} onClick={()=>{if(!editFlag) return ;CKIframe.window.findNextItem()}}>
                  <span className={`${prefixCls}-single-tool-icon2 icon-coms-Next`}>
                    <span className="path1" />
                    <span className="path2" />
                  </span>
                  <span>下一条</span>
                </div>
              </div>
            </div>
            <div className={`${prefixCls}-single-title`}>批注</div>
          </div>

          <div className={`${prefixCls}-single`}>
            <div className={`${prefixCls}-single-tools ${prefixCls}-single-click`} onClick={()=>{
              if(!editFlag) return;
              CKIframe.window.undo();
              // fix: 撤销之后左侧修订active状态和当前鼠标位置不一致
              CKIframe.window.refreshChooseStatus();
            }}>
              <div className={`${prefixCls}-single-tool`}>
                <span className={`${prefixCls}-single-tool-icon icon-coms-Revocation`}>
                  <span className="path1" />
                  <span className="path2" />
                  <span className="path3" />
                </span>
                <div>撤销</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-tools ${prefixCls}-single-click`} onClick={()=>{
              if(!editFlag) return;
              CKIframe.window.redo();
              // fix: 恢复之后左侧修订active状态和当前鼠标位置不一致
              CKIframe.window.refreshChooseStatus();
            }}>
              <div className={`${prefixCls}-single-tool`}>
                <span className={`${prefixCls}-single-tool-icon icon-coms-Restore`}>
                  <span className="path1" />
                  <span className="path2" />
                  <span className="path3" />
                </span>
                <div>恢复</div>
              </div>
            </div>
            <div className={`${prefixCls}-single-title`}>操作</div>
          </div>

          <div className={`${prefixCls}-single2`}>

            <div className={`${prefixCls}-single-tools ${prefixCls}-single-click`} onClick={()=>{fullScreen?this.exitFullScreen():this.onFullScreen()}}>
              
              <div className={`${prefixCls}-single-tool`} >
                {
                  !fullScreen &&
                    <div>
                      <i className="icon-coms-move" style={{fontSize: '20px',color:'#00b1ff'}}></i>
                      <div>全屏展示</div>
                    </div>
                }

                {
                  fullScreen && 
                    <div >
                      <i className="icon-coms-All-contraction" style={{fontSize: '20px',color:'#00b1ff'}}></i>
                      <div>退出全屏</div>
                    </div>
                }
              </div>

            </div>
            <div className={`${prefixCls}-single-title`}>展示</div>
          </div>
          
          <div className="otherBar">

            <div className="nextPage">

              {
                showToolBar && 
                <div className={`${prefixCls}-up transform ${canClickPreviousPage?'':"noClick"}`} onClick={() =>previousPageClick()}>
                  <i className="icon-coms-organization-right"></i>
                </div>
              }
              
              {
                 showToolBar && 
                <div className={`${prefixCls}-down ${canClickNextPage?'':"noClick"}`} onClick={() =>nextPageClick()}>
                  <i className="icon-coms-organization-right"></i>
                </div>
              }             
            </div>
          </div>

          <div className={`${prefixCls}-shrink`} onClick={() =>{if(!editFlag) return ;setMobxState({ showToolBar: !showToolBar })} }>
            <div className={`icon-coms-organization-down ${showToolBar && `${prefixCls}-shrink-icon`}`} />
          </div>
        </div>

        <Modal title="提示" 
          visible={tipShow}
          onOk={()=>setMobxState({tipShow:false})} 
          cancelText={""}
          onCancel={()=>setMobxState({tipShow:false})}
          width='300'
          maskClosable={false}
        >
          <p>当前窗口太小，可能会出现未知的问题，请最大化窗口后使用！</p>
        </Modal>
      </div>
    )
  }

  styleOnClick(key){
    const {setMobxState} = this.props.onlineEditStore;
    key == "1" && CKIframe.window.execdocTitle();
    key == "2" && CKIframe.window.execfubiaoti();
    key == "3" && CKIframe.window.execodocNumber();
    key == "4" && CKIframe.window.execzhusong();
    key == "5" && CKIframe.window.execzhengwen();
    key == "6" && CKIframe.window.insertAttachment(11);
    key == "7" && CKIframe.window.insertAttachment(12);
    key == "8" && CKIframe.window.execshuming();
    key == "9" && CKIframe.window.execqianshuriqi();
    key == "10" && CKIframe.window.execfuzhu();
    if(key > 6){
      setMobxState({styleNextPage:true})
    }else{
      setMobxState({styleNextPage:false})
    }
  }
  setStyleActive(nextPage){
    const {setMobxState} = this.props.onlineEditStore;
    setMobxState({styleNextPage:nextPage})
  }

  uploadFile(){
    const {onlineEditStore} = this.props
    document.getElementById("upLoadFile").click();
    onlineEditStore.hideOnePopover("showFileList");
  }

  //打印
  print(){
    CKIframe.window.odocprint();
    // const {onlineEditStore} = this.props
    // onlineEditStore.odocPrint();
  }

  //导出文件
  exportFile(){
    const {onlineEditStore} = this.props;
    onlineEditStore.saveLocalFile();
  }
  //预览
  preview(){
    const {onlineEditStore} = this.props;
    onlineEditStore.preview();
  }
  //套红预览
  previewWithTempl(){
    const {onlineEditStore} = this.props;
    onlineEditStore.previewWithTempl();
  }

  resizeWindow(){
    const {setMobxState} = this.props.onlineEditStore;
    if(window.innerWidth > 1420 || window.innerWidth == 1420){
      setMobxState({toolsAllPage:1,toolsNowPage:1,tipShow:false})
    }else if(window.innerWidth < 1420 &&  window.innerWidth > 826 || window.innerWidth == 826){
      setMobxState({toolsAllPage:2,toolsNowPage:1,tipShow:false})
    }else if(window.innerWidth < 826 && window.innerWidth > 635){
      setMobxState({toolsAllPage:3,toolsNowPage:1,tipShow:false})
    }else if(window.innerWidth < 635 && window.innerWidth > 0){
      //setMobxState({tipShow:true});
      window.resizeTo(600,window.innerHeight);
    }
  }

  noRevision(){
    try{
      const getRevisionData = document.getElementById("CKIframe").contentWindow.getRevisionData;
      if(getRevisionData){
        const hasRevision = getRevisionData().length > 0;
        if(!hasRevision){
          message.warning("没有任何修订");
          return true;
        }else{
          return false;
        }
      }
    }catch(e){
      if(window.console)console.log(e);
    }
  }

  getCanRevision(){
    return true;
    // let odocConfig = null;
    // let editFlag = false;//编辑是否可用 false 不可用,  true 可用
    // try{
    //   odocConfig = parent.parent.WfForm.getOdocConfig();
    //   editFlag = odocConfig.docParam.isEdit === 1;
    // }catch(e){
    //   if(window.console)console.log();
    // }
    //  return editFlag;
  }

  //全屏展示
  onFullScreen(){
    const {onlineEditStore} = this.props;
    const {setMobxState} = onlineEditStore;
    try{       
      const ownWidth =  this.outerWindow.innerWidth;
      const ownHeight =  this.outerWindow.innerHeight;                                                                                              
      this.outerWindow.document.getElementsByClassName("wea-new-top-req-wapper")[0].style.cssText = `padding-top:0px;`;
      this.outerWindow.document.getElementsByClassName("wea-new-top-req")[0].style.cssText = `display:none;`;
      this.outerWindow.document.getElementsByClassName("wea-new-top-req-content")[0].style.cssText = `height:100%;`;
      this.outerWindow.document.getElementsByClassName("wf-req-odoc")[0].style.cssText = `margin: 0px 0px;`;
      this.outerWindow.document.getElementsByClassName("req-workflow-odoc")[0].style.cssText = `width: 100%;height: ${ownHeight}px;border:none;`;
      this.window.parent.document.getElementById("webOffice").style.cssText = `width:${ownWidth}px;height:${ownHeight}px;position:fixed;top:0px;left:0px;z-index:9999;border:none`; 
      this.outerWindow.onkeydown = this.outerWindowKeyDown;
      this.outerWindow.onresize = this.outerFullResize;
      setMobxState({fullScreen:true})
    }catch(e){
      try{   
        const ownWidth =  this.outerWindow.innerWidth;
        const ownHeight =  this.outerWindow.innerHeight; 
        this.outerWindow.document.getElementsByClassName("wea-new-top-req")[0].style.cssText = `display:none;`;
        this.outerWindow.document.getElementsByClassName("wea-new-top-req-content")[0].style.cssText = `height:100%;`;
        this.outerWindow.document.getElementById("requestdocInForm").parentElement.parentElement.parentElement.parentElement.style.height = `100%`;
        this.outerWindow.document.getElementById("requestdocInForm").parentElement.style.cssText = `margin: 0px 0px;`;
        this.outerWindow.document.getElementById("requestdocInForm").style.cssText = `width: 100%;height: ${ownHeight}px;border:none;`;
        this.window.parent.document.getElementById("htmlContentIframe").style.cssText = `width:${ownWidth}px;height:${ownHeight}px;position:fixed;top:0px;left:0px;z-index:9999;border:none`; 
        this.outerWindow.onkeydown = this.outerWindowKeyDown;
        this.outerWindow.onresize = this.outerFullResize;
        setMobxState({fullScreen:true})

      }catch(e){
        if(window.console) console.log(e)
        message.warning("全屏展示失败！")
      }
    }

  }

  //退出全屏
  exitFullScreen(){
    const {onlineEditStore} = this.props;
    const {setMobxState} = onlineEditStore;
    try{
      this.outerWindow.onresize = this.checkShowToolsBar;
      const outerHeight =  this.outerWindow.innerHeight;
      this.outerWindow.document.getElementsByClassName("wea-new-top-req-wapper")[0].style.cssText = `padding-top:71px;`;
      this.outerWindow.document.getElementsByClassName("wea-new-top-req")[0].style.cssText = `display:block;`;
      this.outerWindow.document.getElementsByClassName("wea-new-top-req-title")[0].firstElementChild.firstElementChild.style.maxWidth="100%";
      this.outerWindow.document.getElementsByClassName("wea-new-top-req-content")[0].style.cssText = `height: ${outerHeight-71}px;`;
      this.outerWindow.document.getElementsByClassName("wf-req-odoc")[0].style.cssText = `height: ${outerHeight-91}px;margin-top: 10px;margin-bottom: 10px;`;
      this.outerWindow.document.getElementsByClassName("req-workflow-odoc")[0].style.cssText = `height: ${outerHeight-91}px;width: 100%;border:none;`;
      parent.document.getElementsByClassName("wea-new-top-req")[0].style.display = 'block';
      parent.document.getElementsByClassName("wea-new-top-req-wapper")[0].style.paddingTop = '38px'; 
      parent.document.getElementById("webOffice").style.cssText = `width:100%;height:100%;border:none;`
      setMobxState({fullScreen:false})
    }catch(e){
      try{   
        this.outerWindow.onresize = this.checkShowToolsBar;
        const outerHeight =  this.outerWindow.innerHeight;
        this.outerWindow.document.getElementsByClassName("wea-new-top-req")[0].style.cssText = `display:block;`;
        this.outerWindow.document.getElementsByClassName("wea-new-top-req-title")[0].firstElementChild.firstElementChild.style.maxWidth="100%";
        this.outerWindow.document.getElementsByClassName("wea-new-top-req-content")[0].style.cssText = `height: 100%;`;
        this.outerWindow.document.getElementById("requestdocInForm").parentElement.style.cssText = `padding-right: 16px; position: relative;`;
        this.outerWindow.document.getElementById("requestdocInForm").style.cssText = `height: ${outerHeight-91}px;border: 0px; width: 100%;border:none;`;
        this.outerWindow.document.getElementsByClassName("wea-new-top-req")[0].style.display = 'block';
        this.outerWindow.document.getElementsByClassName("wea-new-top-req-wapper")[0].style.paddingTop = ''; 
        this.window.parent.document.getElementById("htmlContentIframe").style.cssText = `width:100%;height:100%;border:none;`
        setMobxState({fullScreen:false})
      }catch(e){

        if(window.console) console.log(e)
        message.warning("退出全屏展示失败！")
      }
    }
  }

  //点击修订
  onRevision(){
    const {onlineEditStore} = this.props;
    const {setMobxState,showRevision} = onlineEditStore;
    if(!this.getCanRevision()) return;
    setMobxState({ showRevision: !showRevision });

    // 清楚之前的修订hover时候的痕迹
    CKIframe.window.clearAvtiveRevisionParams();
    CKIframe.window.revision(!showRevision);
    CKIframe.window.setShowRevision(!showRevision);
    CKIframe.window.clearTempUTag();
    if(this.revising){
      CKIframe.window.insertTempUtag('',this.revising);
    }
  }

  //接受所有修订
  receiveAllRevise(){
    CKIframe.window.receiveAllRevise();
  }

  outerFullResize(){
    const {onlineEditStore} = this.props;
    const {setMobxState,showToolBar} = onlineEditStore;
    try{
      const outerWindow = this.outerWindow.innerWidth;
      const outerHeight = this.outerWindow.innerHeight;
      if(!showToolBar){
        setMobxState({showToolBar:true});
        document.getElementById("toolsBar").className = "wea-odoc-onlineEdit-toolsBar false";
        document.getElementById("CKIframe").style.height = "calc( 100% - 100px )";
      }
      this.outerWindow.document.getElementsByClassName('wea-new-top-req-content')[0].style.height = `${outerHeight}px`;
      this.outerWindow.document.getElementsByClassName('wf-req-wrapper')[0].style.height = '100%';
      this.outerWindow.document.getElementsByClassName('req-workflow-odoc')[0].style.height = `${outerHeight}px`;
      parent.document.getElementsByClassName("wea-new-top-req")[0].style.display = 'none';
      parent.document.getElementsByClassName("wea-new-top-req-wapper")[0].style.paddingTop = '0px'; 
      parent.document.getElementsByClassName('wea-new-top-req-content')[0].style.height = `${outerHeight}px`;
      parent.document.getElementById("webOffice").style.cssText = `width:${outerWindow}px;height:${outerHeight-2}px;border:none;`
    }catch(e){
      if(window.console) console.log(e)
    }
  }

  outerWindowKeyDown(e){
    if(e.code == 'Escape'){
      this.exitFullScreen();
    }
  }

  cheakOpenRevision(){
    const {showRevision} = this.props.onlineEditStore;
    if(!showRevision){
      message.warning("没有开启修订");
      return false;
    }
    return true;
  }

  getOuterWindow(obj){
    const ownWidth =  obj.innerWidth;
    const ownHeight =  obj.innerHeight;
    const parentWidth =  obj.parent.innerWidth;
    const parentHeight =  obj.parent.innerHeight;
    if(parentWidth == ownWidth && ownHeight == parentHeight){
      return obj;
    }else{
      return this.getOuterWindow(obj.parent); 
    }
  }

  checkShowToolsBar(){
    const {onlineEditStore} = this.props;
    const {setMobxState,showToolBar} = onlineEditStore;
    if(!showToolBar){
      setMobxState({showToolBar:true});
      document.getElementById("toolsBar").className = "wea-odoc-onlineEdit-toolsBar false";
      document.getElementById("CKIframe").style.height = "calc( 100% - 100px )";
    }
    const outerHeight = this.outerWindow.innerHeight;
    this.outerWindow.document.getElementsByClassName("wea-new-top-req-content")[0].style.cssText = `height: ${outerHeight-71}px;`;
    this.outerWindow.document.getElementsByClassName("wf-req-odoc")[0].style.cssText = `height: ${outerHeight-91}px;margin-top: 10px;margin-bottom: 10px;`;
    this.outerWindow.document.getElementsByClassName("req-workflow-odoc")[0].style.cssText = `height: ${outerHeight-91}px;width: 100%;border:none;`;
    window.parent.document.getElementsByClassName("wea-new-top-req-content")[0].style.height = `${outerHeight-130}px`;
    
  }

 
}

export default Main
